/* eslint-disable react/display-name */
/* eslint-disable react-hooks/rules-of-hooks */
import React from 'react';
import ClassNames from 'classnames';
import { useRafInterval, useMemoizedFn, useSafeState } from 'ahooks';
import Iconfont from '@/components/Iconfont';
import RenderJudge from '@/components/RenderJudge';
import { useStores } from '../utils/store';
import styles from '../style/Controller.module.scss';
import { Tooltip } from 'antd';
import { Slider } from 'antd';
import { PlayOutline } from 'antd-mobile-icons'
import { Slider as H5Slide } from 'antd-mobile/2x'
const CtrlSlider = (props) => <Slider {...props}></Slider>

const H5CtrlSlider = (props) => <H5Slide {...props} className={styles.h5Slide}></H5Slide>

const OpacitySlider = (props) => <Slider {...props}></Slider>

const H5Progress = (props) => <H5Slide {...props} className={styles.h5Slide}></H5Slide>
const Progress = (props) => <Slider {...props} ></Slider>

const CtrlTooltip = ({ title, open, children }) => (
  <Tooltip title={title} open={open} placement="top" arrow>
    {children}
  </Tooltip>
);

const Controller = ({ left, center, right, top }) => {
  const { status } = useStores();
  return (
    <div className={ClassNames(styles.container, status?.mobile ? styles.h5Container : null, { [styles.isVisible]: status.ctrlVisible })}>
      <section className={ClassNames(styles.top, status?.mobile ? styles.h5Top : null)}>
        {top}
      </section>
      <div className={ClassNames(styles.wrapper, status?.mobile ? styles.h5wrapper : null)}>
        <div className={ClassNames(styles.inner, styles.isLeft)}>
          {left(status)}
        </div>
        <div className={ClassNames(styles.inner, styles.isCenter)}>
          {center}
        </div>
        <div className={ClassNames(styles.inner, styles.isRight)}>
          {right(status)}
        </div>
      </div>
    </div >
  );
};

// 播放
Controller.Play = () => {
  const { status, methods } = useStores();
  return (
    <RenderJudge
      value={status.paused}
      active={(
        <RenderJudge value={status?.mobile}
          active={
            <PlayOutline className={styles.h5play} onClick={methods.play} />
          }
          inactive={
            <CtrlTooltip title="播放">
              <div className={ClassNames(styles.item)} onClick={methods.play}>
                <Iconfont name="bofang" className={styles.icon} />
              </div>
            </CtrlTooltip>
          } />
      )}
    />
  );
};
// 暂停
Controller.Pause = () => {
  const { status, methods } = useStores();
  return (
    <RenderJudge
      value={status.played}
      active={(
        <RenderJudge
          value={status?.mobile}
          active={
            <Iconfont name="zanting" onClick={methods.pause} className={ClassNames(styles.icon, styles.h5Pause)} />
          } inactive={
            <CtrlTooltip title="暂停">
              <div className={ClassNames(styles.item)} onClick={methods.pause}>
                <Iconfont name="zanting" className={styles.icon} />
              </div>
            </CtrlTooltip>
          } />
      )}
    />
  );
};
// 刷新
Controller.Refresh = () => {
  const { methods, status } = useStores();
  return (
    <CtrlTooltip title="刷新">
      <div className={ClassNames(styles.item)} onClick={methods.refresh}>
        <Iconfont name="shuaxin" className={styles.icon} />
      </div>
    </CtrlTooltip>
  );
};
// 画质
Controller.Quality = () => {
  let { data: { index, list, setIndex }, status } = useStores();
  if (status?.isVideoBack) {
    list = [{ name: "原画" }]
    index = 0
  }
  const { name } = list[index] || {};
  const onChangeHandle = (v) => {
    if (v === index) return;
    return setIndex(v);
  };
  return (
    <RenderJudge
      value={list.length}
      active={(
        <div className={ClassNames(styles.item, styles.isQuality)}>
          <div className={styles.qualityText}>{name}</div>
          <div className={styles.qualityWrapper}>
            {list.map((row, rowIndex) => (
              <div
                className={ClassNames(styles.qualityItem, { [styles.isActive]: rowIndex === index })}
                onClick={() => onChangeHandle(rowIndex)}
                key={rowIndex}
              >
                {row.name}
              </div>
            ))}
          </div>
        </div>
      )}
    />
  );
};
// 音量
Controller.Volume = () => {
  const { status: { volume, muted, mobile }, methods } = useStores();
  const onChange = (v) => {
    console.log(v)
    methods.volume(v / 100)
  };
  return (
    <>
      <RenderJudge value={mobile} inactive={
        <CtrlTooltip title="音量">
          <div className={styles.item} onClick={methods.switchVolume}>
            <RenderJudge
              value={muted}
              active={(<Iconfont name="jingyin" className={styles.icon} />)}
              inactive={(<Iconfont name="yinliang" className={styles.icon} />)}
            />
          </div>
        </CtrlTooltip>
      } active={
        <div className={styles.h5Volume} onClick={methods.switchVolume}>
          <RenderJudge
            value={muted}
            active={(<Iconfont name="jingyin" className={styles.icon} />)}
            inactive={(<Iconfont name="yinliang" className={styles.icon} />)}
          />
        </div>
      } />
      <div style={{ width: mobile ? '1rem' : "100px" }}>
        <RenderJudge value={mobile} active={
          <H5CtrlSlider min={0}
            max={100}
            step={1}
            value={parseInt(volume * 100)}
            onChange={onChange} />

        } inactive={
          <CtrlSlider
            min={0}
            max={100}
            step={1}
            value={parseInt(volume * 100)}
            onChange={onChange}
          // tooltip={{ formatter: (num) => Math.floor(num || 0), open: status.ctrlVisible }}
          />
        } />
      </div>
    </>
  );
};
// 全屏
Controller.FullScreen = () => {
  const { status, methods } = useStores();
  return (
    <RenderJudge
      value={status.fullScreen}
      inactive={(
        <CtrlTooltip title="全屏">
          <div className={ClassNames(styles.item, status?.mobile ? styles.h5FullScreen : null)} onClick={methods.fullScreen}>
            <Iconfont name="quanping" className={styles.icon} />
          </div>
        </CtrlTooltip>
      )}
    />
  );
};
// 退出全屏
Controller.ExitFullScreen = () => {
  const { status, methods } = useStores();
  return (
    <RenderJudge
      value={status.fullScreen}
      active={(
        <CtrlTooltip title="退出全屏">
          <div className={ClassNames(styles.item, styles.h5FullScreen)} onClick={methods.exitScreen}>
            <Iconfont name="tuichuquanping" className={styles.icon} />
          </div>
        </CtrlTooltip>
      )}
    />
  );
};
// 打开画中画
Controller.OpenPictureInPicture = () => {
  const { status, methods } = useStores();
  return (
    <RenderJudge
      value={status.pictureInPicture}
      inactive={(
        <CtrlTooltip title="打开画中画">
          <div className={ClassNames(styles.item)} onClick={methods.openPictureInPicture}>
            <Iconfont name="open-pip" className={styles.icon} />
          </div>
        </CtrlTooltip>
      )}
    />
  );
};
// 关闭画中画
Controller.ClosePictureInPicture = () => {
  const { status, methods } = useStores();
  return (
    <RenderJudge
      value={status.pictureInPicture}
      active={(
        <CtrlTooltip title="关闭画中画">
          <div className={ClassNames(styles.item)} onClick={methods.closePictureInPicture}>
            <Iconfont name="exit-pip" className={styles.icon} />
          </div>
        </CtrlTooltip>
      )}
    />
  );
};

//回放时的进度条
Controller.Progress = () => {
  const { status, methods, instance = undefined } = useStores();
  const [currentTime, setCurrentTime] = useSafeState(0)
  const time = (currentTime / instance.duration) * 100
  const showTime = time > 100 ? 100 : time
  const handleChange = (newValue) => {
    instance.currentTime = instance.duration * (newValue / 100)
  }
  useRafInterval(() => {
    setCurrentTime(instance?.currentTime)
  }, instance ? 0 : undefined)
  if (status.isVideoBack) {
    return (
      <section className={ClassNames(styles.slides, status?.mobile ? styles.h5SlideAction : null)}>
        <RenderJudge value={status?.mobile} active={<H5Progress step={0.01} value={showTime} onChange={handleChange} min={0} max={100} />}
          inactive={
            <Progress step={0.01} value={showTime} onChange={handleChange} min={0} max={100} />
          } />
      </section>
    )
  }
  return <></>
}

Controller.defaultProps = {
  left: (status) => {
    if (status?.mobile) {
      return (
        <>
          <Controller.Play />
          <Controller.Pause />
          <Controller.Volume />
        </>
      )
    }
    return (
      <>
        <Controller.Play />
        <Controller.Pause />
        <Controller.Refresh />
      </>
    )
  },
  center: (
    <>
    </>
  ),
  right: (status) => {
    if (status?.mobile) {
      return (
        <>
          <Controller.FullScreen />
          <Controller.ExitFullScreen />
        </>
      )
    }
    return (
      <>
        <Controller.Quality />
        <Controller.Volume />
        <Controller.OpenPictureInPicture />
        <Controller.ClosePictureInPicture />
        <Controller.FullScreen />
        <Controller.ExitFullScreen />
      </>
    )
  },
  top: (
    <>
      <Controller.Progress />
    </>
  )
};



export default Controller;
